<template>
  <CommonHead title="商品列表" />
  <div class="order-bar">
    <div
      @click="switchOrder(0)"
      :class="[
        'order',
        'sale',
        {
          active: orderStatus.activeIndex === 0,
        },
      ]"
    >
      销量
    </div>
    <div
      @click="switchOderToPrice"
      :class="[
        'order',
        'price',
        {
          active: orderStatus.activeIndex === 1,
        },
      ]"
    >
      价格
      <div
        :class="[
          'angle',
          'up',
          {
            active: orderStatus.activeIndex === 1 && orderStatus.upDown === 0,
          },
        ]"
      ></div>
      <div
        :class="[
          'angle',
          'down',
          {
            active: orderStatus.activeIndex === 1 && orderStatus.upDown === 1,
          },
        ]"
      ></div>
    </div>
    <div
      @click="switchOrder(2)"
      :class="[
        'order',
        'new',
        {
          active: orderStatus.activeIndex === 2,
        },
      ]"
    >
      新品
    </div>
  </div>
  <div class="list-container">
    <div class="item" v-for="item in items" @click="enterDetail(item.id)" :key="item.id">
      <van-card :price="item.minPrice" :title="item.name" :thumb="item.pic">
        <template #footer>
          <van-icon
            class-prefix="icon"
            size="22"
            color="#e93323"
            name="gouwuchetianjia"
          />
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="ItemLists">
import { ref, reactive, computed, onMounted, watch } from "vue";
import CommonHead from "@c/CommonHead.vue";
import { fetchItems } from "@a/index";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const orderStatus = reactive({
  activeIndex: 0, // 0 按照销量 1 按照价格 2按照新品
  upDown: 0, // 0 升序 1降序
});
// 商品列表排序 字段的值 依据排序状态 计算
const orderBy = computed(() => {
  let _orderBy = "ordersDown"; // 销量降序
  switch (orderStatus.activeIndex) {
    case 0: // 销量降序
      _orderBy = "ordersDown";
      break;
    case 1: // 价格
      if (orderStatus.upDown === 0) {
        // 价格升序
        _orderBy = "priceUp";
      } else {
        _orderBy = "priceDown";
      }
      break;
    case 2: // 新品 发布时间降序
      _orderBy = "addedDown";
      break;
    default:
      break;
  }
  return _orderBy;
});
// 按照非价格排序 按照销量或者 新品排序
const switchOrder = (activeIndex: number) => {
  orderStatus.activeIndex = activeIndex;
};
const switchOderToPrice = () => {
  /*
    1 点击时 不是按照价格排序，点击 切换到价格 默认按照 升序
    2 点击时 就是按照价格排序  点击切换升序和降序
  */
  if (orderStatus.activeIndex !== 1) {
    orderStatus.activeIndex = 1;
    orderStatus.upDown = 0;
  } else {
    if (orderStatus.upDown === 0) {
      orderStatus.upDown = 1;
    } else {
      orderStatus.upDown = 0;
    }
  }
};
// 排序状态改变重新请求
watch(orderBy, () => {
  getItems();
});
// 商品列表数据
const items = ref<any[]>([]);
const getItems = () => {
  fetchItems({
    categoryId: route.query.cateId,
    orderBy: orderBy.value,
  }).then((res) => {
    if (res.data.code === 0) {
      items.value = res.data.data.result;
    }
  });
};
const enterDetail = (id: number) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
onMounted(() => {
  getItems();
});
</script>

<style scoped lang="scss">
.order-bar {
  height: 40px;
  width: 100%;
  background-color: #fafafa;
  position: fixed;
  left: 0;
  top: 46px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 16px;
  z-index: 10;
  .order {
    &.price {
      position: relative;
      .angle {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        position: absolute;
        right: -14px;
        &.up {
          border-bottom-color: #333;
          top: -1px;
          &.active {
            border-bottom-color: #e93323;
          }
        }
        &.down {
          border-top-color: #333;
          top: 9px;
          &.active {
            border-top-color: #e93323;
          }
        }
      }
    }
    &.active {
      color: #e93323;
    }
  }
}
.list-container {
  padding-top: 86px;
  .van-card {
    background-color: #fff;
  }
}
</style>
